<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="author" content="Xenova" />
  <title>Transformers.js</title>
  <meta name="description"
    content="State-of-the-art Machine Learning for the web. Run 🤗 Transformers directly in your browser, with no need for a server!" />

  <!-- Favicon-->
  <!-- Icon made by Freepik (https://www.flaticon.com/free-icons/robot) -->
  <link rel="icon" type="image/x-icon" href="./icons/favicon.ico" />

  <!-- Bootstrap icons-->
  <link href="./theme.css" rel="stylesheet" />
  <link href="./css/bootstrap-icons.css" rel="stylesheet" />

  <!-- Page JS-->
  <script type="module" src="/main.js" defer></script>
</head>

<body>
  <div id="app">
    <!-- Responsive navbar-->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container px-5">
        <a class="navbar-brand" href="#">Transformers.js</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span
            class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item"><a class="nav-link" href="#demo">Demo</a></li>
            <li class="nav-item"><a class="nav-link" href="#quick-tour">Quick tour</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Modal -->
    <div class="modal fade" id="content-modal" tabindex="-1" aria-labelledby="modal-label" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="modal-label">Viewing content</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body"></div>
        </div>
      </div>
    </div>

    <!-- Header-->
    <header class="bg-dark pt-3 pb-5">
      <div class="container px-5">
        <div class="row gx-5 justify-content-center">
          <div class="col-lg-6">
            <div class="text-center">
              <h1 class="display-5 fw-bolder text-white mb-2">Transformers.js</h1>
              <p class="lead text-white-50 mb-4">
                Run <span class="text-white">🤗</span> Transformers in your browser!
              </p>
              <div class="d-grid gap-3 d-sm-flex justify-content-sm-center">
                <a class="btn btn-primary btn-lg px-4 me-sm-3"
                  href="https://huggingface.co/docs/transformers.js">Documentation</a>
                <a class="btn btn-outline-light btn-lg px-4" href="https://github.com/xenova/transformers.js">
                  <i class="bi bi-github"></i> View Source
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Demo section-->
    <section class="py-4 border-bottom" id="demo">
      <div class="container px-5 my-4">
        <div class="mb-2">
          <h2 class="fw-bolder">Demo</h2>
          <p class="lead mb-0">Play around with some of these models:</p>
        </div>
        <div class="row justify-content-center">
          <label>Task: </label>
          <div class="col-12 mt-1">
            <select id="task" class="form-select">
              <option value="translation" selected>
                Translation w/ t5-small (78 MB)
              </option>
              <option value="text-generation">
                Text generation w/ distilgpt2 (85 MB)
              </option>
              <option value="masked-language-modelling">
                Masked language modelling w/ bert-base-cased (110 MB)
              </option>
              <option value="sequence-classification">
                Text classification w/ bert-base-multilingual-uncased-sentiment (169 MB)
              </option>
              <option value="token-classification">
                Token classification w/ Davlan/bert-base-multilingual-cased-ner-hrl (178 MB)
              </option>
              <option value="zero-shot-classification">
                Zero-shot classification w/ typeform/distilbert-base-uncased-mnli (68 MB)
              </option>
              <option value="question-answering">
                Question answering w/ distilbert-base-uncased-distilled-squad (66 MB)
              </option>
              <option value="summarization">
                Summarization w/ distilbart-cnn-6-6 (284 MB)
              </option>
              <option value="code-completion">
                Code completion w/ Salesforce/codegen-350M-mono (369 MB)
              </option>
              <option value="automatic-speech-recognition">
                Speech to text w/ whisper-tiny.en (41 MB)
              </option>
              <option value="image-to-text">
                Image to text w/ vit-gpt2-image-captioning (246 MB)
              </option>
              <option value="image-classification">
                Image classification w/ google/vit-base-patch16-224 (88 MB)
              </option>
              <option value="zero-shot-image-classification">
                Zero-shot image classification w/ openai/clip-vit-base-patch16 (151 MB)
              </option>
              <!-- TODO: add image-segmentation demo -->
              <option value="object-detection">
                Object detection w/ facebook/detr-resnet-50 (43 MB)
              </option>
            </select>
          </div>

          <div id="languages" task="translation" class="task-settings">
            <label class="mt-2">Languages: </label>
            <div class="d-flex">
              <div style="width: calc(50% - 20px);">
                <select id="language-from" class="form-select mt-1 col-3">
                  <option value="en" selected>English</option>
                </select>
              </div>
              <div style="width: 40px;" class="d-flex justify-content-center align-items-center">to</div>
              <div style="width: calc(50% - 20px);">
                <select id="language-to" class="form-select mt-1 col-3">
                  <option value="fr" selected>French</option>
                  <option value="de">German</option>
                  <option value="ro">Romanian</option>
                </select>
              </div>
            </div>
          </div>
          <div class="task-settings"
            task="translation,text-generation,code-completion,masked-language-modelling,summarization,automatic-speech-recognition,image-to-text,zero-shot-classification">
            <label class="mt-2">Parameters: </label>
            <div class="row">
              <div class="task-settings col-xl-2 col-md-4 col-sm-6"
                task="translation,text-generation,code-completion,summarization,automatic-speech-recognition,image-to-text">
                <div class="input-group mb-2">
                  <span class="input-group-text">Max length</span>
                  <input type="number" param-name="max_new_tokens" datatype="number" min="1"
                    class="form-control generation-option" value="200">
                </div>
              </div>
              <div class="task-settings col-xl-2 col-md-4 col-sm-6"
                task="translation,text-generation,code-completion,summarization,automatic-speech-recognition,image-to-text">
                <div class="input-group mb-2" title="Number of beams">
                  <span class="input-group-text">No. beams</span>
                  <input type="number" param-name="num_beams" datatype="number" min="1" max="50"
                    class="form-control generation-option" value="1">
                </div>
              </div>
              <div class="task-settings col-xl-2 col-md-4 col-sm-6" task="masked-language-modelling">
                <div class="input-group mb-2" title="Number of samples">
                  <span class="input-group-text">No. samples</span>
                  <input type="number" param-name="topk" datatype="number" min="1" max="50"
                    class="form-control generation-option" value="5">
                </div>
              </div>
              <div class="task-settings col-xl-2 col-md-4 col-sm-6"
                task="translation,text-generation,code-completion,summarization,automatic-speech-recognition,image-to-text">
                <div class="input-group mb-2" title="Temperature (> 0)">
                  <span class="input-group-text">Temp.</span>
                  <input type="number" param-name="temperature" datatype="number" min="0.001" step="1"
                    class="form-control generation-option" value="1">
                </div>
              </div>
              <div class="task-settings col-xl-2 col-md-4 col-sm-6"
                task="translation,text-generation,code-completion,summarization,automatic-speech-recognition,image-to-text">
                <div class="input-group mb-2">
                  <span class="input-group-text">Top K</span>
                  <input type="number" param-name="top_k" datatype="number" min="0"
                    class="form-control generation-option" value="0">
                </div>
              </div>
              <div class="task-settings col-xl-2 col-md-4 col-sm-6"
                task="translation,text-generation,code-completion,summarization,automatic-speech-recognition,image-to-text">
                <div class="input-group mb-2" title="Perform multinomial sampling">
                  <label class="input-group-text" for="sample-select">Sample</label>
                  <select param-name="do_sample" datatype="bool" class="form-select generation-option"
                    id="sample-select">
                    <option value="true">Yes</option>
                    <option value="false" selected>No</option>
                  </select>
                </div>
              </div>
              <div class="task-settings col-xl-2 col-md-4 col-sm-6" task="zero-shot-classification">
                <div class="input-group mb-2" title="Allow multiple true classes">
                  <label class="input-group-text" for="multi-label-select">Multi label</label>
                  <select param-name="multi_label" datatype="bool" class="form-select generation-option"
                    id="multi-label-select">
                    <option value="true">Yes</option>
                    <option value="false" selected>No</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div task="sequence-classification" class="task-settings">
            <div class="row">
              <div class="col-lg-6">
                <textarea id="sc-input-textbox" class="mt-3 form-control"
                  rows="5">The Shawshank Redemption is a true masterpiece of cinema, a movie that deserves every bit of its status as one of the greatest films ever made. From its stellar performances to its unforgettable storytelling, everything about this film is a testament to the power of great filmmaking.</textarea>
              </div>
              <div class="col-lg-6 mt-1" style="max-height:146px">
                <canvas id="sc-canvas"></canvas>
              </div>
            </div>
          </div>
          <div task="token-classification" class="task-settings">
            <div class="row">
              <div class="col-lg-6 mt-1">
                <textarea id="tc-input-textbox" class="mt-3 form-control"
                  rows="5">Hugging Face is a technology company that was founded in 2016 by Clément Delangue, Julien Chaumond, and Thomas Wolf. The company is headquartered in New York City, and is focused on developing natural language processing software and tools.</textarea>
              </div>
              <div class="col-lg-6 mt-1" style="max-height:146px">
                <div id="tc-output" class="mt-3 p-2"></div>
              </div>
            </div>
          </div>
          <div task="zero-shot-classification" class="task-settings">
            <div class="row">
              <div class="col-lg-6 mt-1">
                <label>Text: </label>
                <textarea id="zsc-input-textbox" class="form-control"
                  rows="5">I have a problem with my iphone that needs to be resolved asap!</textarea>
              </div>
              <div class="col-lg-6 mt-1">
                <label for="zsc-classes" class="form-label mb-0">Possible class names
                  (comma-separated):</label>
                <input type="text" class="form-control" id="zsc-classes"
                  value="urgent, not urgent, phone, tablet, microwave">
                <div style="max-height:146px">
                  <canvas id="zsc-canvas"></canvas>
                </div>
              </div>
            </div>
          </div>
          <div task="masked-language-modelling" class="task-settings">
            <div class="row">
              <div class="col-lg-6">
                <textarea id="mlm-input-textbox" class="mt-3 form-control"
                  rows="5">The goal of life is [MASK].</textarea>
              </div>
              <div class="col-lg-6">
                <textarea id="mlm-output-textbox" class="mt-3 form-control" rows="5"></textarea>
              </div>
            </div>
          </div>
          <div task="question-answering" class="task-settings">
            <div class="row">
              <div class="col-lg-12">
                <p class="mt-3 mb-0">Context:</p>
                <textarea id="qa-context-textbox" class="form-control"
                  rows="7">The Amazon rainforest (Portuguese: Floresta Amazônica or Amazônia; Spanish: Selva Amazónica, Amazonía or usually Amazonia; French: Forêt amazonienne; Dutch: Amazoneregenwoud), also known in English as Amazonia or the Amazon Jungle, is a moist broadleaf forest that covers most of the Amazon basin of South America. This basin encompasses 7,000,000 square kilometres (2,700,000 sq mi), of which 5,500,000 square kilometres (2,100,000 sq mi) are covered by the rainforest. This region includes territory belonging to nine nations. The majority of the forest is contained within Brazil, with 60% of the rainforest, followed by Peru with 13%, Colombia with 10%, and with minor amounts in Venezuela, Ecuador, Bolivia, Guyana, Suriname and French Guiana. States or departments in four nations contain "Amazonas" in their names. The Amazon represents over half of the planet's remaining rainforests, and comprises the largest and most biodiverse tract of tropical rainforest in the world, with an estimated 390 billion individual trees divided into 16,000 species.</textarea>
              </div>
              <div class="col-lg-6">
                <p class="mt-3 mb-0">Question:</p>
                <textarea id="qa-question-textbox" class="form-control"
                  rows="5">What proportion of the planet's rainforests are found in the Amazon?</textarea>
              </div>
              <div class="col-lg-6">
                <p class="mt-3 mb-0">Answer:</p>
                <textarea id="qa-answer-textbox" class="form-control" rows="5"></textarea>
              </div>
            </div>
          </div>
          <div task="translation" class="task-settings">
            <div class="row">
              <div class="col-lg-6">
                <textarea id="input-textbox" class="mt-3 form-control" rows="5">Hello, how are you?</textarea>
              </div>
              <div class="col-lg-6">
                <textarea id="output-textbox" class="mt-3 form-control" rows="5"></textarea>
              </div>
            </div>
          </div>
          <div task="summarization" class="task-settings">
            <div class="row">
              <div class="col-lg-9">
                <textarea id="summarization-input-textbox" class="mt-3 form-control"
                  rows="6">The tower is 324 metres (1,063 ft) tall, about the same height as an 81-storey building, and the tallest structure in Paris. Its base is square, measuring 125 metres (410 ft) on each side. During its construction, the Eiffel Tower surpassed the Washington Monument to become the tallest man-made structure in the world, a title it held for 41 years until the Chrysler Building in New York City was finished in 1930. It was the first structure to reach a height of 300 metres. Due to the addition of a broadcasting aerial at the top of the tower in 1957, it is now taller than the Chrysler Building by 5.2 metres (17 ft). Excluding transmitters, the Eiffel Tower is the second tallest free-standing structure in France after the Millau Viaduct.</textarea>
              </div>
              <div class="col-lg-3">
                <textarea id="summarization-output-textbox" class="mt-3 form-control" rows="6"></textarea>
              </div>
            </div>
          </div>
          <div task="text-generation" class="task-settings">
            <div class="row">
              <div class="col-lg-12 mt-3">
                <textarea id="text-generation-textbox" class="form-control"
                  rows="10">I enjoy walking with my cute dog,</textarea>
              </div>
            </div>
          </div>
          <div task="code-completion" class="task-settings">
            <div class="row">

              <div class="col-lg-12 mt-3">
                <div id="code-completion-container" class="code-container">
                  <textarea spellcheck="false">def fib(n):</textarea>
                  <pre aria-hidden="true">
                                  <code class="language-python" id="highlighting-content">def fib(n):</code>
                              </pre>
                </div>
              </div>
            </div>
          </div>
          <div task="automatic-speech-recognition" class="task-settings">

            <div class="row">

              <label class="mt-3">Audio: </label>

              <div class="col-lg-6">
                <select id="audio-select" class="form-select">
                  <option value="./audio/jfk.wav">Example 1</option>
                  <option value="./audio/ted.wav">Example 2</option>
                  <option value="./audio/ted_60.wav">Example 3</option>
                  <option show-custom>Custom</option>
                </select>

                <input class="mt-2 form-control" style="display: none;" type="file" id="audio-file" name="audio-file"
                  accept="audio/*">

                <audio id="audio-player" controls class="mt-2 w-100">
                  <source src="./audio/jfk.wav">
                  Your browser does not support the audio element.
                </audio>
              </div>

              <div class="col-lg-6">
                <textarea id="speech2text-output-textbox" class="form-control" rows="6"></textarea>
              </div>
            </div>
          </div>
          <div task="image-to-text" class="task-settings">

            <div class="row pt-2">
              <div class="col-lg-6">
                <label>Image: </label>
                <select id="image-select" class="form-select">
                  <option value="./images/football-match.jpg">
                    Example 1
                  </option>
                  <option value="./images/airport.jpg">
                    Example 2
                  </option>
                  <option value="./images/savanna.jpg">
                    Example 3
                  </option>
                  <option show-custom>Custom</option>
                </select>

                <input class="mt-2 form-control" style="display: none;" type="file" id="image-file" name="image-file"
                  accept="image/*">

                <img id="image-viewer" class="w-100 p-4" src="./images/football-match.jpg" crossorigin="anonymous">
              </div>

              <div class="col-lg-6">
                <textarea id="image2text-output-textbox" class="form-control" rows="6"></textarea>
              </div>
            </div>
          </div>
          <div task="image-classification" class="task-settings">

            <div class="row pt-2">
              <div class="col-lg-6">
                <label>Image: </label>
                <select id="ic-select" class="form-select">
                  <option value="./images/tiger.jpg">
                    Example 1
                  </option>
                  <option value="./images/teapot.jpg">
                    Example 2
                  </option>
                  <option value="./images/palace.jpg">
                    Example 3
                  </option>
                  <option show-custom>Custom</option>
                </select>

                <input class="mt-2 form-control" style="display: none;" type="file" id="ic-file" name="ic-file"
                  accept="image/*">

                <img id="ic-viewer" class="w-100 p-4" src="./images/tiger.jpg" crossorigin="anonymous">
              </div>

              <div class="col-lg-6" style="max-height:146px">
                <canvas id="ic-canvas"></canvas>
              </div>
            </div>
          </div>
          <div task="zero-shot-image-classification" class="task-settings">

            <div class="row pt-2">


              <div class="col-lg-6">
                <label>Image: </label>

                <select id="zsic-select" class="form-select">
                  <option value="./images/football-match.jpg">
                    Example 1
                  </option>
                  <option value="./images/airport.jpg">
                    Example 2
                  </option>
                  <option value="./images/savanna.jpg">
                    Example 3
                  </option>
                  <option show-custom>Custom</option>
                </select>

                <input class="mt-2 form-control" style="display: none;" type="file" id="zsic-file" name="zsic-file"
                  accept="image/*">

                <img id="zsic-viewer" class="w-100 p-4" src="./images/football-match.jpg" crossorigin="anonymous">

              </div>

              <div class="col-lg-6 mt-1">
                <label for="zsic-classes" class="form-label mb-0">Possible class names
                  (comma-separated):</label>
                <input type="text" class="form-control" id="zsic-classes" value="football, airport, animals">
                <div style="max-height:146px">
                  <canvas id="zsic-canvas"></canvas>
                </div>

              </div>

            </div>
          </div>
          <div task="object-detection" class="task-settings">
            <div class="row pt-2">
              <div class="col-lg-6">
                <label>Image: </label>
                <select id="od-select" class="form-select">
                  <option value="./images/cats.jpg">
                    Example 1
                  </option>
                  <option value="./images/football-match.jpg">
                    Example 2
                  </option>
                  <option value="./images/airport.jpg">
                    Example 3
                  </option>
                  <option value="./images/savanna.jpg">
                    Example 4
                  </option>
                  <option show-custom>Custom</option>
                </select>

                <input class="mt-2 form-control" style="display: none;" type="file" id="od-file" name="od-file"
                  accept="image/*">

                <div class="position-relative">
                  <img id="od-viewer" class="w-100 h-100 p-4" src="./images/cats.jpg" crossorigin="anonymous">
                  <svg id="od-overlay" preserveAspectRatio="none"
                    class="position-absolute w-100 h-100 left-0 start-0 p-4" style="z-index: 1;" viewBox="0 0 240 160"
                    xmlns="http://www.w3.org/2000/svg">
                  </svg>
                </div>

              </div>

              <div class="col-lg-6 mt-lg-5" style="max-height:250px">
                <canvas id="od-canvas" style="height:250px"></canvas>
              </div>
            </div>
          </div>
          <div class="mt-3 mb-1">
            Notes:
            <ul>
              <li>Clicking <em>Generate</em> for the first time will download the corresponding model from
                the
                <a href="https://huggingface.co/models">HuggingFace Hub</a>.
                All subsequent requests will use the cached model.
              </li>
              <li>For more information about the different parameters, check out HuggingFace's
                <a href="https://huggingface.co/blog/how-to-generate">guide to text generation</a>.
              </li>
            </ul>
          </div>
          <div class="col-12 mt-2 d-flex justify-content-center">
            <button id="generate" type="button" class="btn btn-primary">Generate</button>

            <!-- <button class="btn btn-primary" type="button">
                      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                      <span class="visually-hidden">Loading...</span>
                    </button> -->
          </div>

          <div id="progress" class="col-12 mt-4" style="display: none;">
            <div class="d-flex align-items-center position-relative py-2">
              <div><strong>Loading model files...</strong> (only run once)</div>
              <div class="spinner-border position-absolute" role="status" aria-hidden="true" style="right: 0">
              </div>
            </div>

            <div id="progress-bars" class="d-flex justify-content-center flex-column gap-2 py-2"></div>
          </div>
        </div>
      </div>
    </section>


    <!-- Teaser section-->
    <section class="py-4 border-bottom" id="quick-tour">
      <div class="container px-5 my-4">
        <div class="mb-3">
          <h2 class="fw-bolder">Quick tour</h2>
        </div>
        <div class="mb-3">
          <h5 class="mb-2">Installation</h5>
          To install via <a href="https://www.npmjs.com/package/@xenova/transformers">NPM</a>, run:
          <pre><code class="language-bash">npm i @xenova/transformers</code></pre>

          Alternatively, you can use it in vanilla JS, without any bundler, by using a CDN
          or static hosting. For example, using
          <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">ES Modules</a>,
          you can import the library with:

          <pre><code class="language-html">&lt;script type=&quot;module&quot;&gt;
    import { pipeline } from &#39;https://cdn.jsdelivr.net/npm/@xenova/transformers&#39;;
&lt;/script&gt;</code></pre>
        </div>

        <div class="mb-3">
          <h5 class="mb-2">Basic example</h5>
          It's super easy to translate from existing code!
          <div class="row gx-5">
            <div class="col-lg-6 mb-4 mb-lg-0">
              <pre><code class="language-python">from transformers import pipeline

# Allocate a pipeline for sentiment-analysis
pipe = pipeline('sentiment-analysis')

out = pipe('I love transformers!')
# [{'label': 'POSITIVE', 'score': 0.999806941}]</code></pre>
              <p class="mb-0 text-center">Python (original)</p>

            </div>
            <div class="col-lg-6 mb-4 mb-lg-0">
              <pre><code class="language-js">import { pipeline } from '@xenova/transformers';

// Allocate a pipeline for sentiment-analysis
let pipe = await pipeline('sentiment-analysis');

let out = await pipe('I love transformers!');
// [{'label': 'POSITIVE', 'score': 0.999817686}]</code></pre>
              <p class="mb-0 text-center">JavaScript (ours)</p>
            </div>
          </div>
          <br>
          In the same way as the Python library, you can use a different model by providing its
          name as the second argument to the pipeline function. For example:
          <pre><code class="language-js">// Use a different model for sentiment-analysis
let pipe = await pipeline('sentiment-analysis', 'nlptown/bert-base-multilingual-uncased-sentiment');</code></pre>

          <br>
          For the full list of available tasks and architectures, check out the
          <a href="https://huggingface.co/docs/transformers.js/index#supported-tasksmodels">documentation</a>.
        </div>
      </div>
    </section>

    <!-- Footer-->
    <footer class="py-3 bg-dark">
      <div class="container px-5">
        <p class="m-0 text-center text-white">Copyright &copy; Xenova 2023</p>
      </div>
    </footer>

  </div>
</body>

</html>